<template>
	<view class="play-list" :style="{ height: height + 'rpx' }">
		<view v-for="(item, index) in communityList" :key="index" class="play-list-item" @click="jump(item)">
			<!-- <image class="play-list-background" :src="item.landscapeImgUrl" :style="{ height: iHeight + 'rpx' }" mode="widthFix"></image> -->
			<view class="play-list-background" :style="{ backgroundImage: `url(${item.landscapeImgUrl})`, height: iHeight + 'rpx' }"></view>
			<view class="play-list-name">{{ item.associationName + ' | ' + item.remark }}</view>
		</view>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	created() {
		const info = uni.getSystemInfoSync();
		this.height = info.windowHeight * (750 / info.windowWidth);
		this.iHeight = (this.height - 80 - 3 * 87 - 44) / 4;
	},
	data() {
		return {
			communityList: [],
			height: 0,
			iHeight: 0
		};
	},
	onPullDownRefresh() {
		this.getSomeData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	mounted() {
		this.getSomeData();
	},
	methods: {
		getSomeData() {
			http('/api/sysAssociationType/appIndexGetList', {
				method: 'GET'
			}).then(result => {
				this.communityList = result.data || [];
			});
		},
		jump({associationId, associationName}) {
			//埋点
			this.$umaTrackEvent('home-community', { associationId, associationName, source: '社群页' });
			uni.navigateTo({
				url: '/home/community/index?associationId=' + associationId + '&associationName=' + associationName,
				animationType: 'pop-in',
				animationDuration: 200
			});
		}
	}
};
</script>

<style scoped lang="less">
page {
	background: #fff;
}

.play-list {
	padding: 40rpx;
	background-color: #fff;
	display: flex;
	flex-direction: column;

	.play-list-item {
		.play-list-background {
			width: 100%;
			vertical-align: top;
			border-radius: 20rpx;
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: center center;
		}

		.play-list-name {
			color: #66645d;
			margin-top: 11rpx;
			margin-bottom: 40rpx;
			font-size: 25rpx;
			font-weight: 500;
			line-height: 36rpx;
		}
		&:last-child {
			.play-list-name {
				margin-bottom: 0;
			}
		}
	}
}
</style>
